<template>
  <view class="category_wrapper">
    <!-- 章节项目 -->
    <view v-for="item in categories" :key="item.id" class="category_wrapper_item" @tap="handleQuestion(item)">
      <!-- 左侧图片 -->
      <image class="category_wrapper_item_img" src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/%E5%88%9B%E5%BB%BA%E5%BC%A0%E5%A4%A9%E5%B8%88%E5%9B%BE%E5%83%8F_compressed.png" mode="aspectFill"></image>
      <!-- 右侧项目内容 -->
      <view class="category_wrapper_item_content">
        <view class="category_wrapper_item_content_title">
          {{item.name}}
        </view>
        <view class="category_wrapper_item_content_sub">
          {{item.counts}}题 | 难度{{item.difficulty}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  loadCategories
} from "../../service/api.js";
// 类别列表
export default {
  data() {
    return {
      // 题目类别数组
      categories: []
    }
  },
  // 页面挂载完成后，获取类别数据
  mounted() {
    const categories = loadCategories();
    this.categories = categories;
  },
  methods: {
    // 点击类别进入对应的答题页面，需要将点击的类别id传入过去。
    handleQuestion(item) {
      const categoryId = item.id;
      uni.navigateTo({
        url: `/pages/question/question?categoryId=${categoryId}`,
      });
    }
  }
}
</script>

<style>
.category_wrapper {
  background: #0000000d;
  min-height: 100vh;
  padding: 30rpx;
}

.category_wrapper_item {
  background: white;
  padding: 30rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.category_wrapper_item_img {
  width: 100rpx;
  height: 100rpx;

}

.category_wrapper_item_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 30rpx;
}

.category_wrapper_item_content_title {
  font-weight: bold;
  color: #000000d4;
  flex: 1;
}

.category_wrapper_item_content_sub {
  font-size: 24rpx;
  color: #0000008f;
  margin-top: 14rpx;
}
</style>
